<template>
	<div>
		<div class="container">
			<div id="allmap">
			</div>
			<div class="wrap">
				<div class="left">
					<span>所在城市:</span>
					<!--点击弹出城市选择,三级联动-->
					<span>{{baidumap}} <img class="sanjiliandong" src="../../assets/img/shouye/triangle.png"/></span>
				</div>
				<!--登录后的状态-->
				<div class="conter">
					<div>
						您好，
						<span class="phone">17701269859</span>
						<a class="tuichu">退出</a>
					</div>
					<a>我的订单</a>
					<a>我的消息</a>
					<a>我是商家</a>
					<img src="../../assets/img/shouye/phone.png" />
					<span>400-800-8820</span>
				</div>

			</div>
		</div>
		<!--三级联动弹出内容-->
		<div class="backx">
			<div class="cont">
				<div class="shaddress">
					<p class="jianyi">建议您的收货地址: </p>
					<p class="shdizhi">郑州市二七区</p>
					<div class="address1">
						<city></city>
						<input type="text" name="qu" id="qu" placeholder="区" />
						<img class="bottom-arrow1" src="../../assets/img/sanjiao.png" />
						<img class="bottom-arrow2" src="../../assets/img/sanjiao.png" />
						<img class="bottom-arrow3" src="../../assets/img/sanjiao.png" />
						<button id="btn">保存</button>
					</div>
				</div>
			</div>
		</div>
		<denglu></denglu>
	</div>
</template>

<script>
	import city from 'v-distpicker'
	import denglu from '@/components/home-logo/denglu'
	import { MP } from '@/assets/js/map'
	export default {
		components: {
			city,
			denglu,
		},
		methods: {
			//三级联动
			nav: function() {
				$(".address select").eq(1).mouseleave(function() {
					if($(".address select").eq(1).val() != "市") {
						$("#qu").css("display", "none");
					};
					$(".address select").css("width", "140px");
					$(".address select").css("appearance", "none");
				});
				$(".address select").eq(0).mouseleave(function() {

					if($(".address select").eq(0).val() != "省") {
						$("#qu").css("display", "block");
					};
					//三级联动样式
					$(".address select").css("width", "140px");
					$(".address select").css("appearance", "none");
				});
				//三级联动样式
				$(".address select").css("width", "140px");
				$(".address select").css("appearance", "none");
				$(".left").click(function() {
					$(".backx").fadeIn(500);

				});
				$("#btn").click(function() {
					$(".backx").fadeOut(500);
				});
				//退出登录
				$(".tuichu").click(function() {
					$(".kuang").fadeIn(500);
				});
				$("#dl").click(function() {
					$(".kuang").fadeOut(500);
				})
			}
		},
		data: function() {
			return {
				baidumap: "郑州蓝鸥欢迎您"
			}
		},
		mounted: function() {
			this.nav();
			//改变this指向
			var _this = this;
			this.$nextTick(function() {
				MP(_this.ak).then(function(BMap) {
					// 百度地图API功能
					var map = new BMap.Map("allmap");
					/*以下写获取位置信息的代码*/
					var geolocation = new BMap.Geolocation();
					geolocation.getCurrentPosition(function(r) {
						if(this.getStatus() == BMAP_STATUS_SUCCESS) {
							var mk = new BMap.Marker(r.point);
							getAddress(r.point);
						} else {
							alert('failed' + this.getStatus());
						}
					});
					/*获取地址信息，设置地址label*/
					function getAddress(point) {
						var gc = new BMap.Geocoder();
						gc.getLocation(point, function(rs) {
							var addComp = rs.addressComponents;
							/*获取地址*/
							var address = addComp.province + addComp.city + addComp.district + addComp.street;
							//							              alert(address);
							_this.baidumap = address;
						});
					}

				});
			});
		}

	}
</script>

<style scoped="scoped">
	.container {
		width: 100%;
		height: 36px;
		background: #eeeeee;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}
	
	.wrap {
		width: 1280px;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.backx {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		background: rgba(0, 0, 0, .5);
		display: none;
		z-index: 100;
	}
	
	.left {
		cursor: pointer;
	}
	
	.left img {
		padding-left: 6px;
	}
	
	.conter {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	
	.conter a {
		padding: 0 13px;
		border-right: 1px solid #999999;
	}
	
	.phone {
		color: #4B943D;
	}
	
	.conter img {
		padding-left: 13px;
		padding-right: 6px;
	}
	/*三级联动弹出框*/
	
	.cont {
		position: absolute;
		left: 40%;
		margin: 300px auto;
		width: 702px;
		height: 355px;
		background: url(../../assets/img/shouye/bgtu.png) no-repeat;
		/*display: none;*/
	}
	
	.address1 {
		position: absolute;
		width: 500px;
		height: 40px;
		left: 140px;
		top: 160px;
	}
	
	#qu {
		position: absolute;
		border: 1px solid #DCDCDC;
		width: 138px;
		height: 38px;
		border-radius: 5px;
		top: 0;
		left: 287px;
		text-indent: 0.7em;
	}
	
	.bottom-arrow1 {
		position: absolute;
		left: 120px;
		top: 14px;
	}
	
	.bottom-arrow2 {
		position: absolute;
		left: 262px;
		top: 14px;
	}
	
	.bottom-arrow3 {
		position: absolute;
		left: 407px;
		top: 14px;
	}
	
	.shaddress {
		position: relative;
	}
	
	.jianyi {
		position: absolute;
		left: 65px;
		top: 70px;
		font-size: 20px;
	}
	
	.shdizhi {
		position: absolute;
		font-size: 18px;
		border-radius: 5px;
		left: 242px;
		top: 60px;
		color: #ffffff;
		padding: 10px 41px;
		background: #498e3d;
	}
	
	#btn {
		position: absolute;
		font-size: 18px;
		background: #f08200;
		padding: 9px 57px;
		border-radius: 5px;
		left: 140px;
		top: 100px;
	}
</style>